<template>
  <!-- 商品展示区域 -->
  <view class="">
    <!-- 商品图片 -->
    <image class="good-img" :src="item.img" mode=""></image>
  </view>
  <view class="good">
    <!-- 商品标题 -->
    <text class="good-title">{{item.name}}</text><br>
    <!-- 商品价格区域 -->
    <view class="good-price">
      <!-- 打折后的价格 -->
      <text class="good-price1">抱团费：￥{{Math.floor(item.price*0.7)}}</text>
      <!-- 原价 -->
      <text class="good-price2">￥{{item.price}}</text>
      <!-- 活动优惠信息 -->
      <text class="error"> 活动优惠 7折</text>
    </view>
    <!-- 地理位置信息 -->
    <view class="kilometer">您到这里有<span class="kilometer_span">{{dis}}</span>公里</view>
    <!-- 导航按钮 -->
    <button type="button" class="goto-button" @tap="goto">去这里</button>
    <!-- 浏览区域 -->
    <view class="good-static">
      <!-- 月销量 -->
      <text class="good-static-text">月销：{{Math.floor(Math.random()*10000)}}</text>
      <!-- 收藏量 -->
      <text class="good-static-text">收藏：{{Math.floor(Math.random()*10000)}}</text>
      <!-- 浏览量 -->
      <text class="good-static-text">浏览：{{Math.floor(Math.random()*10000)}}</text>
    </view>
  </view>
  <!-- 商品介绍区域 -->
  <view class="good-intro-box">
    <!-- 介绍标题 -->
    <text class="good-intro-title">介绍</text><br>
    <!-- 介绍内容 -->
    <text class="good-intro">{{item.intro}}</text>
  </view>
  <!-- 评价区域 -->
  <uni-section title="评价(103) &nbsp;&nbsp;&nbsp;&nbsp; 好评率98.5%" type="line" titleFontSize="18px" padding />
  <view class="comment-box">
    <!-- 评价列表 -->
    <view class="comment" v-for="(item,index) in pinlun">
      <!-- 用户头像 -->
      <image class="comment-avatar" :src="item.img" mode=""></image>
      <view class="comment-right">
        <!-- 用户名 -->
        <text class="comment-name">{{item.username}}</text>
        <!-- 评价内容 -->
        <text class="comment-content">{{item.intro}}</text>
        <!-- 评价时间 -->
        <text class="comment-date">时间:{{item.createdAt}}</text>
      </view>
    </view>
  </view>
</template>

<script setup>
  // 导入Vue的响应式API
  import { ref, computed } from 'vue'
  // 导入uni-app的生命周期钩子
  import { onLoad } from '@dcloudio/uni-app'
  // 导入配置文件
  import { CONFIG } from '../../utils/config.js'
  // 导入状态管理库
  import { userStore } from '../../store/userStore';
  // 导入经纬度计算工具
  import { getMapDistance } from "@/utils/tools.js"
  let store = userStore()
  // 计算与商品地理位置的距离  使用computed计算属性计算与商品地理位置的距离。
  let dis = computed(() => getMapDistance(store.currentPos.longitude, store.currentPos.latitude,
    item.value.lon, item.value.lat))

  // 定义商品信息的响应式变量
  let item = ref({})
  // 页面加载时执行的操作   在页面加载时，根据传递的ID获取商品详情和商品评论
  onLoad((data) => {
    getItemByid(data.id)
    getpinlun()
  })
  // 根据商品id获取商品详情
  async function getItemByid(id) {
    let data = {
      "objectId": id
    }
    let ed = encodeURI(JSON.stringify(data))
    let res = await uni.$get(CONFIG.leancloud_url + "/1.1/classes/ChinaPlayItem?where=" + ed)
    item.value = res.results[0]
    console.log(item.value)
    uni.setNavigationBarTitle({
      title: item.value.name
    })
    // 控制台输出经纬度信息
    console.log(store.currentPos)
    console.log(item.value.lat, item.value.lon)
  }
  // 获取商品评论
  let pinlun = ref([])
  async function getpinlun() {
    let res = await uni.$get(CONFIG.leancloud_url + "/1.1/classes/pinglunqu")
    pinlun.value = res.results
    console.log(pinlun.value)
  }

  // 导航到地图查看商品位置goto函数用于导航到地图查看商品位置。

  function goto() {
    uni.navigateTo({
      url: `/pages/mywebView/mywebView?lat=${item.value.lat}&lon=${item.value.lon}&name=${item.value.name}&type=2`
    })
  }
</script>


<style lang="scss">
  /* 商品图片样式 */
  .good-img {
    width: 100%;
    height: 400px;
    display: block;
    margin: auto;
  }

  /* 商品信息区域样式 */
  .good {
    width: 100%;
    height: 100%;

    .good-price {
      display: flex;
      flex-direction: row;
      align-items: center;
      margin: 15px 0;

      .good-price1 {
        color: orange;
        font-size: 16px;
      }

      .good-price2 {
        color: #c3c3c3;
        text-decoration-line: line-through;
        font-size: 14px;
        margin: 0 10px;
      }

      .error {
        color: white;
        border: 1px solid red;
        border-radius: 5px;
        background-color: red;
      }
    }

    .good-static {
      display: flex;
      flex-direction: row;
      justify-content: space-between;

      .good-static-text {
        color: #c3c3c3;
        font-size: 12px;
      }
    }
  }

  /* 地理位置信息样式 */
  .kilometer {
    width: 100%;
    font-size: 18px;
    font-weight: bold;
    border: 1px solid grey;
    border-radius: 10px;
    background-color: #c3c3c3;
  }

  .kilometer_span {
    border: 1px solid orange;
    border-radius: 10px;
    background-color: orange;
    color: red;
  }

  /* 商品介绍区域样式 */
  .good-intro-box {
    margin-top: 20px;
    height: 100%;
  }

  .good-title {
    font-size: 28px;
    color: black;
  }

  .good-intro-title {
    height: 100%;
    font-size: 45rpx;
    color: #fa436a;
  }

  .good-intro {
    margin-top: 20px;
    margin-left: 15px;
    font-size: 30rpx;
    color: #909399;
  }

  /* 评价区域样式 */
  .comment-box {
    border: 1px solid gray;

    .comment {
      display: flex;
      flex-direction: row;
      margin: 15px 0;

      .comment-avatar {
        width: 500px;
        height: 60px;
        border-radius: 50px;
        margin-right: 15px
      }

      .comment-right {
        flex-direction: column;
        justify-content: space-between;

        .comment-name {
          font-weight: bold;
        }

        .comment-content {
          margin: 5px 0;
          font-size: 12px;
          color: grey;
          text-indent: 1em;
          overflow: hidden;
          /* 设定行数 */
          -webkit-line-clamp: 5;
          /* 超出字符转换为........... */
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
        }

        .comment-date {
          color: #c9c9c9;
          font-size: 12px
        }
      }
    }
  }
</style>